<template>
  <div class="box">
    <div class="header"></div>

    <div class="left">
      <!-- 天气情况 -->
      <div class="left_top">
        <div class="title">
          <Title title="环境监测 - - - -"></Title>
        </div>

        <div class="weather">
          <div class="weather-top">
            <div class="weatherleft">
              <span>{{ weater.air_pm25 }}℃</span>
            </div>
            <div class="weathercenter">
              <div class="data">
                <span>{{ weater.wea_night }}</span>
                <span class="tu1">47优</span>
              </div>
              <div>
                <span> {{ weater.tem2 }} ~ {{ weater.tem1 }} ℃</span>
              </div>
            </div>
            <div class="weatherright">
              <p>
                <span class="iconfont icon-taiyang"></span><span style="color: yellow">高温黄色预警</span>
              </p>
            </div>
          </div>
          <div class="weather-center">
            <div>
              <span class="iconfont icon-Thermometer">体感</span><span>{{ weater.tem }}℃</span>
            </div>
            <div>
              <span class="iconfont icon-fengli">风力</span><span>{{ weater.win }}</span>
            </div>
            <div>
              <span class="iconfont icon-shidu">湿度</span><span>{{ weater.humidity }}</span>
            </div>
          </div>
          <div class="weather-bottom">
            <div class="weat_left">
              <p class="fexl">
                <span>{{ weater.tem2 }} ~ {{ weater.tem1 }} ℃</span><span class="iconfont icon-yueliang"
                  style="color: yellow"></span>
              </p>
              <p class="fexl1">
                <span>今天</span><span class="tu2">{{ weater.air }} {{ weater.air_level }}</span><span>晴</span>
              </p>
            </div>
            <div class="weat_right">
              <p class="fexl">
                <span>{{ weater.tem2 }} ~ {{ weater.tem1 }} ℃</span><span class="iconfont icon-taiyang"
                  style="color: yellow"></span>
              </p>
              <p class="fexl1">
                <span>明天</span><span class="tu2">{{ weater.air }} {{ weater.air_level }}</span><span>晴</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 学生分布情况 -->
      <div class="student">
        <div class="title">
          <Title title="学生分布情况 - - - -"></Title>
        </div>
        <div class="Line">
          <echartsVue :option="option" />
        </div>
      </div>
    </div>
    <div class="center">
      <xuan></xuan>
      <footernav class="footernav"></footernav>
    </div>
    <div class="right">

      <div class="rtop">
        <div style="width: 100%;height: 30px;">
          <Title title="水电用量 - - - -" class="rtitle">
            <template v-slot="prop">
              <div class="rotateTitle">{{ prop.title }}</div>
            </template>
          </Title>
        </div>

        <div class="shui">
          <div class="sd">

            <div style="display: flex;border: 1px solid #fff;width: 50%;justify-content: space-around;">
              <img src="../assets//images/dian 2.png" />
              <div style="padding:5px;">
                <p>72670</p>
                <p>总用电量</p>
              </div>
            </div>
            <div style="display: flex;border: 1px solid #fff;width: 50%;justify-content: space-around;">
              <img src="../assets//images/shui 2.png" />
              <div style="padding:5px;">
                <p>6980</p>
                <p>总用水量</p>
              </div>
            </div>

          </div>
          <div class="tu">
            <echartsVue :option="option1" />
            
          </div>
        </div>

      </div>
      <div class="rbot">
       <div style="width: 100%;height: 30px;">
          <Title title="校园人员流动情况 - - - -" class="rbtitle">
            <template v-slot="prop">
              <div class="brotateTitle">{{ prop.title }}</div>
            </template>
          </Title>
        </div>

         <div class="sdb">

            <div style="display: flex;border: 1px solid #fff;width: 50%;justify-content: space-around;">
              <img src="../assets//images/fang 2.png" />
              <div style="padding:5px;">
                <p>6</p>
                <p>昨日外来访客</p>
              </div>
            </div>
            <div style="display: flex;border: 1px solid #fff;width: 50%;justify-content: space-around;">
              <img src="../assets//images/jin.png" />
              <div style="padding:5px;">
                <p>13</p>
                <p>今日外来访客</p>
              </div>
            </div>

          </div>

          <div class="btu">
            <echartsVue :option="option2" />
          </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, reactive } from "vue";
import { getstudentstats, getWeather,getshuidian,getdataBottom } from "../request/api";
import xuan from '../components/xuan.vue';

// 标题组件封装
import Title from "../components/Title/index.vue";
import echartsVue from '../components/echart.vue'
import moment from 'moment'
import footernav from '../components/footernav.vue';

// 存储天气数据
let weater = ref({});
// 天气函数接口
getWeather({
  unescape: 1,
  version: "v61",
  appid: "82296227",
  appsecret: "oU9LdM36",
}).then((res) => {
  console.log(res);
  weater.value = res.data;
});

// 定义学生分布情况option
let option = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    textStyle: {
      color: ' #fff'
    },
    icon: "circle"
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
})


// let option1 = ref({
//    tooltip: {
//         trigger: 'axis',
//     },
//     legend: {
//         data: [],
//         icon: 'circle',
//         textStyle: {
//             color: '#fff'
//         }
//     },
//     grid: {
//         left: 60
//     },
//     xAxis: [
//         {
//             type: 'category',
//             data: []
//         }
//     ],
//     yAxis: [
//         {
//             type: 'value'
//         }
//     ],
//      series: [
//     {
//       name: 'Direct',
//       type: 'bar',
//       emphasis: {
//         focus: 'series'
//       },
//       data: [320, 332, 301, 334, 390, 330, 320]
//     },
//     {
//       name: 'Email',
//       type: 'bar',
//       stack: 'Ad',
//       emphasis: {
//         focus: 'series'
//       },
//       data: [120, 132, 101, 134, 90, 230, 210]
//     },
//     // {
//     //   name: 'Union Ads',
//     //   type: 'bar',
//     //   stack: 'Ad',
//     //   emphasis: {
//     //     focus: 'series'
//     //   },
//     //   data: [220, 182, 191, 234, 290, 330, 310]
//     // },
//     // {
//     //   name: 'Video Ads',
//     //   type: 'bar',
//     //   stack: 'Ad',
//     //   emphasis: {
//     //     focus: 'series'
//     //   },
//     //   data: [150, 232, 201, 154, 190, 330, 410]
//     // },
//     // {
//     //   name: 'Search Engine',
//     //   type: 'bar',
//     //   data: [862, 1018, 964, 1026, 1679, 1600, 1570],
//     //   emphasis: {
//     //     focus: 'series'
//     //   },
//     //   markLine: {
//     //     lineStyle: {
//     //       type: 'dashed'
//     //     },
//     //     data: [[{ type: 'min' }, { type: 'max' }]]
//     //   }
//     // },
//     // {
//     //   name: 'Baidu',
//     //   type: 'bar',
//     //   barWidth: 5,
//     //   stack: 'Search Engine',
//     //   emphasis: {
//     //     focus: 'series'
//     //   },
//     //   data: [620, 732, 701, 734, 1090, 1130, 1120]
//     // },
//     // {
//     //   name: 'Google',
//     //   type: 'bar',
//     //   stack: 'Search Engine',
//     //   emphasis: {
//     //     focus: 'series'
//     //   },
//     //   data: [120, 132, 101, 134, 290, 230, 220]
//     // },
//     // {
//     //   name: 'Bing',
//     //   type: 'bar',
//     //   stack: 'Search Engine',
//     //   emphasis: {
//     //     focus: 'series'
//     //   },
//     //   data: [60, 72, 71, 74, 190, 130, 110]
//     // },
//     // {
//     //   name: 'Others',
//     //   type: 'bar',
//     //   stack: 'Search Engine',
//     //   emphasis: {
//     //     focus: 'series'
//     //   },
//     //   data: [62, 82, 91, 84, 109, 110, 120]
//     // }
//   ]
// })

let option1=ref( {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
    textStyle: {
            color: '#fff'
        }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Forest',
      type: 'bar',
      barGap: 0,
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Steppe',
      type: 'bar',
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Desert',
      type: 'bar',
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    },
    {
      name: 'Wetland',
      type: 'bar',
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [98, 77, 101, 99, 40]
    }
  ]
})

let option2=ref( {
  legend: {
     textStyle: {
            color: '#fff'
        }
  },
  tooltip: {},
  dataset: {
    dimensions: ['product', ],
    source: [
      { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
      { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
    
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
                type: 'bar',
                
                itemStyle: {
                    // 柱子颜色渐变
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2a37ff' },
                        { offset: 0.5, color: '#711cff' },
                        { offset: 1, color: '#b205ff' }]),
                        // 圆弧
                    barBorderRadius: 15,
                },
                // 柱子粗细
                barWidth: '15%',
            },
            {
                type: 'bar',
                itemStyle: {
                    // 柱子颜色 单色
                    color: '#38da84',
                    barBorderRadius: 15,
                },
                barWidth: '15%',
            }
    
  ]
})

let ws = new WebSocket('ws://localhost:3002/bigscreen/websockets?id=10086')
onMounted(() => {
  ws.onmessage = (e) => {
    let res = JSON.parse(e.data);

    const xData=[]
    let now=+new Date()
    for (let a=0;a<7;a++){
      xData.unshift(moment(now).format('kk:mm:ss'))
      now-=120*1000
    }

    option.value.xAxis.data=xData
    option.value.legend.data = res.legendData
    option.value.series = res.legendData.map((item, index) => {
      return {
        data: res.seriesData[index],
        type: 'line',
        stack: 'Total',
        name: item,
        showSymbol: false,
        smooth: true
      }
    })
  }

})

getshuidian().then(res=>{
  console.log(res,'shuid')
   option1.value.legend.data = res.data.data.result[0].series.map(item => item.name)
    option1.value.xAxis[0].data = res.data.data.result[0].yAxis.data
    option1.value.series = res.data.data.result[0].series
    console.log(222, option1.value.series);
})

getdataBottom().then(res=>{
  console.log(res)
  option2.value.dataset.dimensions=res.data.data.result[0].dimensions
  option2.value.dataset.source=res.data.data.result[0].source
})

</script>

<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  background: url("../assets/images/pageBg.png") no-repeat 0 0/100% 100%;
  color: #fff;

  .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: url("../assets/images/Top.png") no-repeat 0 0/100% 100%;
  }

  .left {
    width: 30%;
    height: 100%;
    background: url("../assets/images/Left.png") no-repeat 0 0/100% 100%;

    .left_top {
      margin: 80px 60px 30px 50px;
      height: 40vh;

      // border: 1px solid red;
      .title {
        height: 40px;
        // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
        color: white;
        font-weight: bold;
        line-height: 40px;
        // padding-left: 10px;
        
      }

      .weather {
        margin-top: 10px;
        height: 39vh;
        background-color: #0c1d5f;

        .weather-top {
          color: white;
          height: 75px;
          // border: 1px solid red;
          display: flex;

          .weatherleft {
            width: 30%;
            height: 100%;

            span {
              padding-left: 20px;
              font-size: 32px;
              line-height: 75px;
            }
          }

          .weathercenter {
            width: 40%;
            height: 100%;
            font-size: 10px;

            .data {
              display: flex;
              margin-top: 20px;
              font-size: 10px;

              .tu1 {
                margin-left: 10px;
                display: block;
                width: 30px;
                height: 15px;
                text-align: center;
                background-color: green;
                border-radius: 20%;
              }
            }
          }

          .weatherright {
            width: 30%;
            height: 100%;

            .icon-taiyang {
              color: yellow;
            }

            p {
              margin-right: 30px;
              font-size: 10px;
              margin-top: 20px;
            }
          }
        }

        .weather-center {
          margin: 15px 20px 20px 20px;
          height: 130px;
          background-color: rgba(39, 38, 38, 0.1);
          border: 1px solid rgb(107, 107, 234);
          color: white;
          font-size: 12px;

          div {
            height: 43px;
            line-height: 43px;
            border-bottom: 1px solid rgb(107, 107, 234);
            margin: 0px 20px;
            display: flex;
            justify-content: space-between;
          }
        }

        .weather-bottom {
          margin: 15px 20px 20px 20px;
          height: 10vh;
          border: 1px solid rgb(107, 107, 234);
          display: flex;

          .weat_left {
            margin: 10px 0px 10px 0px;
            width: 50%;
            border-right: 1px solid rgb(107, 107, 234);
            font-size: 10px;
            color: white;
            line-height: 30px;

            .fexl {
              display: flex;
              justify-content: space-around;
            }

            .fexl1 {
              display: flex;
              justify-content: space-around;
            }

            .tu2 {
              width: 30px;
              height: 15px;
              text-align: center;
              background-color: green;
              border-radius: 20%;
              line-height: 15px;
            }
          }

          .weat_right {
            margin: 10px 0px 10px 0px;
            width: 50%;
            color: white;
            line-height: 30px;
            font-size: 10px;

            .fexl {
              display: flex;
              justify-content: space-around;
            }

            .fexl1 {
              display: flex;
              justify-content: space-around;
            }

            .tu2 {
              width: 30px;
              height: 15px;
              text-align: center;
              background-color: green;
              border-radius: 20%;
              line-height: 15px;
            }
          }
        }
      }
    }

    .student {
      margin: 60px 60px 30px 50px;
      height: 42vh;
      // border: 1px solid red;

      .title {
        height: 40px;
        line-height: 40px;
      }

      .Line {
        width: 100%;
        height: 360px;
        // background-color: #fff;
      }
    }
  }

  .center {
    flex: 1;
    .footernav{
      width: 50%;
      height: 75px;
      position: absolute;
      bottom: 5vh;
      left: 25%;
    }
  }

  .right {
    width: 30%;
    height: 100%;
    background: url("../assets/images/Right.png") no-repeat 0 0/100% 100%;

    .rtop {
      margin: 80px 60px 30px 50px;
      height: 45vh;
      // border: 1px solid red;

      .rtitle {
        transform: rotateY(180deg);

        .rotateTitle {
          transform: rotateY(-180deg);
          padding-left: 20px;
          padding-top: 10px;
          font-size: 19px;
          font-weight: bold;
        }
      }

      .shui {
        width: 100%;
        height: 90%;

        // background-color: #fff;
        .sd {
          width: 100%;
          height: 10%;
          // background-color: plum;
          display: flex;
          justify-content: space-around;
        }

        .tu {
          width: 100%;
          height: 90%;
          margin-top:3% ;
          // background-color: #fff;
        }
      }
    }

    .rbot {
      margin: 20px 60px 30px 50px;
      height: 35vh;
      // border: 1px solid red;
      .rbtitle {
        transform: rotateY(180deg);

        .brotateTitle {
          transform: rotateY(-180deg);
          padding-left: 20px;
          padding-top: 10px;
          font-size: 19px;
          font-weight: bold;
        }
      }
      .sdb {
          width: 100%;
          height: 15%;
          // background-color: plum;
          display: flex;
          justify-content: space-around;
        }
         .btu {
          width: 100%;
          height: 90%;
          margin-top:3% ;
          // background-color: #fff;
        }
    }
  }
}
</style>
